<template>
  <div id="map"></div>
</template>

<script>
import axios from 'axios';
import { onMounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import '../lib/leaflet.tilelayer.wmts.min.js';
export default {
  setup() {

    function drawBoundary(blist, map) {
      // 最外层矩形四个角
      var pNW = { lat: 59.0, lng: 73.0 };
      var pNE = { lat: 59.0, lng: 136.0 };
      var pSE = { lat: 3.0, lng: 136.0 };
      var pSW = { lat: 3.0, lng: 73.0 };
      var pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);

      // 处理数据，向多边形中添加经纬度坐标点
      for (var i = 0; i < blist.length; i++) {
        var points = [];
        blist[i].forEach(item => {
          points.push({lat: item[1],lng: item[0]});
        })
        pArray = pArray.concat(points);
        pArray.push(pArray[0]);
      };

      var plyall = L.polygon(pArray, { 
        color:'transparent',
        fillColor:'#C0C0C0',
        fillOpacity: 0.9
      });
      plyall.addTo(map);
    }

    //加载显示区域的边界
    function readRegionGeoJson(map) {
      var url = "/src/assets/json/down.json";
      var jhLine;
      axios.get(url).then( res => {
        // 设置地图边界颜色样式等
        jhLine = L.geoJSON(res.data, {
          style: {
            weight:8,
            fillColor:'',
            color: "yellow",
            fillOpacity:0.00001
          }
        });
        jhLine.addTo(map);
        // drawBoundary(res.data.features[0].geometry.coordinates, map);
      })
    }

    onMounted(() => {

      const map = L.map('map', {
        minZoom: 4,
        maxZoom: 15,
        center: [32.065386, 118.802709],
        zoom: 8,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });

      /*
        普通图层
          1. 城市图: http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}
          2. 水流图: http://219.140.196.67:9998/arcgis/rest/services/reservoir/demPNG/MapServer/tile/{z}/{y}/{x}
      */
      /*
        wmts瓦片图层
          1. 地形图: http://10.1.3.199:8092/iserver/services/map-ugcv5-mdem30m/wmts100
            - 参数: 第一层
              tileMatrixSet: 'GoogleMapsCompatible_m_dem30m',
              layer:'m_dem30m',
              Format : 'image/png'
          2. 河流图: http://10.1.3.199:8092/iserver/services/map-ugcv5-msxv/wmts100?
            - 参数: 第二层
              (1) tileMatrixSet: 'GoogleMapsCompatible_m_sx_v',
              (2) layer:'m_sx_v',
              (3) Format : 'image/png'
      */

      const url = 'http://10.1.3.199:8092/iserver/services/map-ugcv5-mdem30m/wmts100';  
      let options = {
        tileMatrixSet: 'GoogleMapsCompatible_m_dem30m',
        layer:'m_dem30m',
        Format : 'image/png'
      };
      let wmtsLayer = L.tileLayer.wmts(url, options);
      let baseLayers = {};
      baseLayers['Blue Marble World'] = wmtsLayer;
      wmtsLayer.addTo(map);
      // 0
      L.control.layers(baseLayers).addTo(map);

      const url1 = 'http://10.1.3.199:8092/iserver/services/map-ugcv5-msxv/wmts100?';  
      let options1 = {
        tileMatrixSet: 'GoogleMapsCompatible_m_sx_v',
        layer:'m_sx_v',
        Format : 'image/png'
      };
      let wmtsLayer1 = L.tileLayer.wmts(url1, options1);
      let baseLayers1 = {};
      baseLayers1['Blue Marble World'] = wmtsLayer1;
      wmtsLayer1.addTo(map);
      // 1
      L.control.layers(baseLayers1).addTo(map);

      /*
        加载普通图层
          L.tileLayer(url, {
            maxZoom: 16,
            attribution: 'Hello world'
          }).addTo(map);         
      */
      // const url2 = 'http://219.140.196.67:9998/arcgis/rest/services/reservoir/demPNG/MapServer/tile/{z}/{y}/{x}';
      // const topLayer = L.tileLayer(url2, {
      //   maxZoom: 16,
      //   attribution: 'Hello world'
      // });        
      // let baseLayers2 = {};
      // baseLayers2['Blue Marble World'] = topLayer;   
      // topLayer.addTo(map);        
      // // 2
      // L.control.layers(baseLayers2).addTo(map);  

      readRegionGeoJson(map);
    });
  }
}
</script>

<style lang="less" scoped>
  #map {
    width: 100vw;
    height: 100vh;
  }
</style>